<template>
    <view class="login-page">

        <view class="login-main">
            <form class="login-form" name="formData" v-if="showAccount">
                <view class="form-item user-area">
                    <view class="form-label">
                        <image :src="imgObj.userimg" mode="widthFix"></image>
                        <text class="form-label-text">{{ loginMethod }}</text>
                    </view>
                    <view class="form-item-content">
                        <input name="user" type="text" v-model="formData.phoneNum" autocomplete="off" maxlength="20"
                            @blur="handlePhone" :placeholder="`请输入${loginMethod}`" />

                        <view class="suffix" v-if="formData.phoneNum">
                            <u-icon name="close-circle" @click="formData.phoneNum = ''"></u-icon>
                        </view>
                    </view>
                    <text v-show="valid.phone" class="error">{{ valid.phone }}</text>
                </view>
                <view>
                    <u-row customStyle="margin: 15px 0;">
                        <u-col :span="8">
                            <view class="form-item ">
                                <view class="form-label">
                                    <image src="../../static/assets/img/login/valid_icon.png" mode="widthFix"></image>
                                    <text class="form-label-text">图形验证码</text>
                                </view>
                                <view class="form-item-content">
                                    <input name="graphicalCode" v-model="formData.graphicalCode" :key="inputType"
                                        :type="'text'" autocomplete="new-password" placeholder="请输入图形验证码"
                                        @blur="handlePwd" />
                                </view>
                                <text v-show="valid.graphicalCode" class="error">{{ valid.graphicalCode }}</text>
                            </view>
                        </u-col>
                        <u-col :span="4">
                            <!-- 图形验证码 -->
                            <view class="get-code" v-if="identifyCode" @click="fetchValidCode()">
                                <sIdentify :identifyCode="identifyCode"></sIdentify>
                            </view>
                        </u-col>
                    </u-row>
                </view>
                <u-row customStyle="margin: 15px 0;"> <u-col :span="8">
                        <view class="form-item graphicalCode-area">
                            <view class="form-label">
                                <image :src="imgObj.validCodeImg" mode="widthFix"></image>
                                <text class="form-label-text">验证码</text>
                            </view>
                            <view class="form-item-content">
                                <input name="graphicalCode" v-model="formData.verificationCode" :key="inputType"
                                    :type="'text'" autocomplete="new-password" placeholder="请输入验证码" />
                            </view>
                        </view>
                    </u-col>
                    <u-col :span="4">
                        <view class="authcodeBox" @click="click2SendAuthCode()">{{ computedAuthCode }}</view>
                    </u-col>
                </u-row>


                <view class="login-btn">
                    <button class="syswin-button primary" @click="loginNext">{{ '下一步' }}</button>
                </view>
            </form>
            <form class="login-form" name="formData" v-else>
                <view class="form-item user-area">
                    <view class="form-label">
                        <text class="form-label-text">{{ '新密码' }}</text>
                    </view>
                    <view class="form-item-content">
                        <input name="user" type="text" v-model="modifyForm.newPwd" autocomplete="off" maxlength="20"
                            @blur="handleNewPad(modifyForm.newPwd)" :placeholder="`8-21位字母/数字/特殊字符的组合`" />

                        <view class="suffix" v-if="modifyForm.newPwd">
                            <u-icon name="close-circle" @click="modifyForm.newPwd = ''"></u-icon>
                        </view>
                    </view>
                    <text v-show="validNewPad.newPwd" class="error">{{ validNewPad.newPwd }}</text>
                </view>
                <u-row>
                    <u-col :span="12">
                        <view class="form-item">
                            <view class="form-label">
                                <text class="form-label-text">再次确认</text>
                            </view>
                            <view class="form-item-content">
                                <input name="graphicalCode" v-model="modifyForm.verifyPwd" :key="inputType"
                                    :type="'text'" autocomplete="new-password" placeholder="再次确认新密码"
                                    @blur="vaildNewPwd(modifyForm.verifyPwd)" />
                            </view>
                            <text v-show="validNewPad.verifyPwd" class="error">{{ validNewPad.verifyPwd }}</text>
                        </view>
                    </u-col>
                </u-row>

                <view class="login-btn">
                    <button class="syswin-button primary" :class="{ 'disabled': isLoading }" :disabled="isLoading"
                        @click="setNewPad">{{ '下一步' }}</button>
                </view>
            </form>

        </view>

    </view>
</template>

<script>
import sIdentify from '@/components/sIdentify.vue';
import CryptoJS from 'crypto-js'
import { encryptPwd } from '../../utils/parseData'
// import createAxios from ''

const secretKey = "wytfw3JtZXJyZWZvcm1lc4";

export default {
    name: 'login',
    components: {
        sIdentify,
        // SendCode,
        // singleCheck
    },
    data() {
        return {
            phone: '',
            showAccount: true,
            imgObj: {
                userimg: `${this.$baseIMGUrl}/static/assets/img/login/user.png`,
                validCodeImg: `${this.$baseIMGUrl}/static/assets/img/login/password.png`,
            },
            // formData: {
            //     phone: '',
            //     graphicalCode: '',
            //     server: 'https://218.13.4.206:7571', // 服务器IP地址
            //     code: ''
            // },
            getcode: true,
            sendAuthCode: '获取验证码',
            computedAuthCode: '获取验证码',
            inputType: 'password',
            textColor: '#409EFf',
            formData: {
                phoneNum: '',
                graphicalCode: '', // 图形验证码
                verificationCode: ''
            },
            modifyForm: {
                newPwd: '',
                verifyPwd: ''
            },
            valid: {
                phone: '',
                graphicalCode: '',
                verificationCode: '',
            },
            validNewPad: {
                newPwd: '',
                verifyPwd: ''
            },
            identifyCode: '',
            timer: null,
            loginMethod: '手机号',
            configValueStatus: false,
            isCheckSendCode: false,
            configValue: false, // 短信验证
            isSendCode: false, // 是否已经发送验证码
            btnText: '获取验证码',
            isAgree: false, // 是否同意
            isShowAgreement: false, // 是否显示协议
            mode: 1, // 1为验证码登录, 2为密码登录
            showPwd: false,
            isLoading: false,
            rememberPassword: true,
            passwordShow: 1
        }
    },
    watch: {
        rememberPassword(newVal) {
            this.textColor = newVal ? '#409EFf' : '#000'
        },
    },
    computed: {
        isPasswordMode() {
            return this.mode === 0
        },
        version() {
            // 小程序环境获取版本号
            return '7.6.0' // 小程序可在manifest.json中配置版本号后读取


        },
        isValid() {
            if (!this.isAgree) {
                return false
            }
            if (this.validPhone(this.formData.phone) || this.validCode(this.formData.graphicalCode)) {
                return false
            }
            return true
        },

    },
    onLoad() {
    },
    methods: {
        // 获取验证码
        async fetchValidCode() {
            // this.identifyCode = 'c1234'
            const res = await this.$Geting(this.$api.getWorkbenchSilderCode, { mobile: this.formData.phoneNum })
            console.log(res, 'res')
            if (res.code === '0') {
                this.formData.graphicalCode = ''
                this.identifyCode = res.data
            } else {
                // this.$toast(res.message)
                this.identifyCode = ''
            }
        },
        setNewPad() {
            // 修改完密码后返回登录页
        },
        validPhone(phone) {
            const phoneReg = /^1[3-9]\d{9}$/;
            if (!phone) {
                return `手机号不能为空`
            }
            if (!phoneReg.test(phone)) {
                return '请输入正确的手机号';
            }
            return ''
        },
        validVerifiCode(code) {
            if (!code) {
                return `请输入验证码`
            }
            return ''
        },
        vaildNewPwd(password) {
            if(password !== this.modifyForm.newPwd ){
                uni.showToast({
                    title: '两次输入的新密码应保持一致',
                    icon: 'none'
                })
            }
        },
        handleNewPad(password) {
            
            const passwordReg = /^(?![a-zA-Z]+$)(?![0-9]+$)(?![^a-zA-Z0-9]+$).{8,21}$/;

            if (!password) {
                uni.showToast({
                    icon: 'none',
                    title: '请输入密码'
                })
                return;

            }


            if (password.length < 8 || password.length > 21) {
                uni.showToast({
                    icon: 'none',
                    title: '密码长度必须为8-21位'
                })
                return;

            }

            if (!passwordReg.test(password)) {
                uni.showToast({
                    icon: 'none',
                    title: '密码需包含字母、数字、特殊字符中的至少两种'
                })
                return;

            }
        },
        handleVPad(password) {
            if (password !== this.modifyForm.newPwd) {
                return '两次密码输入不一致,请重新输入';

            }
            else {
                return ''
            }
        },
        validCode(graphicalCode) {
            if (graphicalCode == this.identifyCode) {
                return ''
            } else {
                return '请输入正确的验证码!'
            }
        },
        countDownFinish() {
            this.getcode = true;
        },
        // 点击发送验证码
        click2SendAuthCode() {
            // 手机号码是否正确
            // if (this.validPhone(this.formData.phoneNum) || this.validCode(this.formData.graphicalCode)) {
            //     // this.$toast('请先输入正确的手机号码')
            //     return;
            // }

            // 是否已发送短信
            if (this.timer) {
                return;
            }
            let total = 60;
            let loop = () => {
                this.computedAuthCode = total + 's';
                total--;
                if (total > 0) {
                    this.timer = setTimeout(() => {
                        loop();
                    }, 1000);
                } else {
                    this.computedAuthCode = this.sendAuthCode;
                    clearTimeout(this.timer);
                    this.timer = null;
                }
            };
            loop();
            this.getPhoneAuthCode();
        },
        async getPhoneAuthCode() {
            let res = await this.$Posting(this.$api.sendCode + this.formData.phoneNum + `/${this.formData.graphicalCode}?_t=${new Date().getTime()}`)
            if (res.isSuccess) {
                this.formData.verificationCode = res.data
            } else {
                uni.showToast({
                    icon: 'none',
                    title: res.message,
                });
            }
        },
        handlePhone() {
            this.valid.phone = this.validPhone(this.formData.phoneNum)
            if (!this.valid.phone) {
                this.identifyCode = ''
                this.fetchValidCode()
            }

        },
        handlePwd() {
            this.valid.graphicalCode = this.validCode(this.formData.graphicalCode)
        },
        toServerUrl() {
            const { graphicalCode, phone } = this.formData
            this.$store.commit('setLoginForm', { graphicalCode, phone, isAgree: this.isAgree })
            //   uni.navigateTo({ url: '/pages/serverUrl/serverUrl' })
        },
        clearphone() {
            console.log('clearphone')
            this.formData.phone = ''
        },
        async loginNext() {
            this.showAccount = false;
            // 调用微信登录接口获取 code
            //   if(!this.handleNewPad() && !this.handleVPad()){
            //     this.showAccount = false;
            //   }
        },
    },
    onUnload() {

    }
}
</script>

<style lang="scss" scoped>
// @import '../../styles/global.css';

.login-page {
    height: 100vh;
    width: 100vw;
    min-height: 720rpx;
    position: relative;
    background-color: #f9f9f9;

    .banner-block {
        border-bottom-left-radius: 30rpx;
        border-bottom-right-radius: 30rpx;
        overflow: hidden;

        image {
            width: 100%;
        }
    }
}



.login-main {
    background: #fff;
    margin: 0 auto;
    position: absolute;
    left: 50%;
    width: 700rpx;
    height: 60%;
    top: 12rpx;
    border-radius: 20rpx;
    // margin: 24rpx 24rpx;
    transform: translateX(-50%);

    .server-btn {
        color: #fff;
        position: absolute;
        right: 16rpx;
        top: -24rpx;
        font-size: 16rpx;
        padding-right: 6rpx;

        .arrow-right {
            /* 箭头大小 */
            display: inline-block;
            width: 12rpx;
            height: 12rpx;
            /* 箭头颜色 */
            border-top: 3rpx solid #fff;
            border-right: 3rpx solid #fff;

            /* 旋转角度形成右箭头 */
            transform: rotate(45deg);
            /* 抗锯齿处理 */
            transform-origin: center;
            backface-visibility: hidden;
        }
    }

    .logo {
        width: 100rpx;
        height: 100rpx;
        margin: 0 auto;
        position: relative;
        top: 62rpx;
        background-color: #ffffff;
        border-radius: 4rpx;

        image {
            width: 100%;
            height: 100%;
        }
    }
}

.login-form {
    margin: 0 auto;
    position: relative;
    top: 82rpx;
    margin-top: 86rpx;

    >view {
        position: relative;
        margin-top: 10rpx;
    }

    input {
        // width: 600rpx;
        height: 40rpx;
        border-bottom: 1px solid #dae0e5;
        color: #333333;
        font-size: 30rpx;
        line-height: 24rpx;
        padding: 0 40rpx;
        padding-right: 40rpx;
    }

    .form-label {
        display: flex;
        padding-left: 20rpx;
        align-items: center;

        image {
            width: 20rpx;
            margin-right: 5rpx;
            vertical-align: middle;
        }

        .form-label-text {
            display: inline-block;
            padding-left: 12rpx;
            color: #222;
        }
    }
}

.Pad-form {}

.form-item {
    &+.form-item {
        position: relative;
        top: 10rpx;
        padding-top: 30rpx;
    }

    .form-item-content {
        margin-top: 16rpx;
        position: relative;
        // font-size: 16rpx;
    }

    .error {
        color: #EB5757;
        // position: absolute;
        display: block;
        width: 100%;
        font-size: 14px;
        height: 20rpx;
        line-height: 20rpx;
        padding-left: 36rpx;
        bottom: -4rpx;
        transform: translateY(100%);
    }

    .suffix {
        position: absolute;
        top: 50%;
        display: inline-block;
        right: 15rpx;
        transform: translateY(-50%);
        padding: 6rpx 8rpx;

        .close-icon {
            display: inline-block;
            width: 40rpx;
            height: 40rpx;
        }

        image {
            display: inline-block;
            width: 20rpx;
            height: 20rpx;
        }
    }
}

.graphicalCode-area {
    input {
        width: 400rpx;
    }
}

.authcodeBox {
    width: 100%;
    margin: 0 auto;
    padding-left: 40rpx;
}

.login-btn {
    height: 50rpx;
    margin: 0 auto;
    margin-top: 200rpx;

    .syswin-button {
        width: 86%;
        color: #fff;
        height: 78rpx;
        border-radius: 10rpx;

        &.primary {
            background: #409EFF;
        }

        &.disabled {
            background: rgba(86, 125, 244, .5);
        }
    }
}

.wuyetoon-agreement {
    width: 100%;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 16rpx;
    bottom: 80rpx;
    font-size: 16rpx;

    .agreement-box {
        margin-right: 5rpx;
        margin-top: -1rpx;
        // width: 10rpx !important;
        // height: 10rpx !important;
        border-radius: 5rpx !important;
    }

    text {
        font-size: 26rpx;
        color: #333333;

        &:last-of-type {
            color: #3395ff;
        }
    }
}

.version {
    font-size: 26rpx;
    text-align: center;
    width: 100%;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 16rpx;
    bottom: 48rpx;
}

.remember-password {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 6rpx;
}

.options-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20rpx 40rpx;
    position: relative;
    top: 32rpx;
}

.remember-item {
    display: flex;
    align-items: center;
}

.remember-text {
    font-size: 28rpx;
    color: #409EFF;
    margin-left: 10rpx;
}

.forgotPwd {
    font-size: 28rpx;
    color: #333;
}
</style>